<script>
import { areaList } from '@vant/area-data';
import { addressEditFn, regionTreeFn, addressAddFn } from '@/api/address'
export default {
  data() {
    return {
      areaList,
      info: {},
      region: [],
      arr: {},
      item: {},

    }
  },
  methods: {
    onSave(value) {
      // 保存时候进行操作
      // console.log(value, 11111111);

      const item = JSON.parse(this.$route.params.item)
      // console.log(item,444444444);
      // debugger
      let lingshi = []


      if (this.region.length === 0) {
        if (this.item.add) {
          lingshi = [
            {

              label: '北京',
              value: 1,
            },
            {

              label: '北京市',
              value: 2,
            },
            {

              label: '东城区',
              value: 3,
            }
          ]

        } else {
          lingshi = [{
            label: item.region.province,
            value: item.province_id
          }, {
            label: item.region.city,
            value: item.city_id
          },
          {
            label: item.region.region,
            value: item.region_id
          }]
        }


      }
      // console.log(lingshi);

      const form = {
        addressId: item.address_id,
        form: {
          name: value.name,
          phone: value.tel,
          region: this.region.length === 0 ? lingshi : this.region,
          detail: value.addressDetail
        }
      }
      if (this.item.add) {
        const canshu = {
          form: form.form,
        }

        addressAddFn(canshu).then(res => {
          console.log(res);

        })
        // return
      }
      else {
        addressEditFn(form).then(res => {
          // console.log(res, 111111111111);

        })
      }




      this.$router.replace({
        path: '/address',

        query: {
          value,
        }
      })


      // showToast('save')
    },
    changeArea(value) {
      // console.log(value);
      let label = this.arr
      // debugger
      value.forEach((item, index) => {
        if (index === 0) {
          for (let key in label.province_list) {
            if (item.text.indexOf(label.province_list[key]) != -1) {
              this.region[0] = { label: item.text, value: key }
            }
          }
        }
        else if (index === 1) {
          for (let key in label.city_list) {
            if (label.city_list[key] === item.text) {
              this.region[1] = { label: item.text, value: key }
            }
          }
        }
        else if (index === 2) {
          for (let key in label.county_list) {
            if (label.county_list[key] === item.text) {
              this.region[2] = { label: item.text, value: key }
            }
          }
        }




      });
      // console.log(this.region, 1111111);



    }






  },
  mounted() {
    this.$refs.wbd.setAreaCode("110101")
    regionTreeFn().then(res => {
      // console.log(res, 55555555555);
      // this.areaList = res.data.list
      // console.log(res.data.list);
      const list = res.data.list
      const arr = {
        city_list: {

        },
        county_list: {

        },
        province_list: {

        }
      }

      for (const key in list) {
        // console.log(list[key]);
        arr.province_list[key] = list[key].name
        for (const cityKey in list[key].city) {
          arr.city_list[cityKey] = list[key].city[cityKey].name
          const countyList = list[key].city[cityKey].region
          for (const countyKey in countyList) {

            arr.county_list[countyKey] = countyList[countyKey].name
          }
        }


      }
      // console.log(arr, 11111111);
      // console.log(arr.county_list);

      // console.log(this.areaList, 222222);

      this.arr = arr



    })
    const item = JSON.parse(this.$route.params.item)
    this.item = item
    if (item.add) return
    this.info = {

      name: item.name,
      tel: item.phone,
      province: item.region.province,
      city: item.region.city,
      county: item.region.region,
      addressDetail: item.detail,
      areaCode: item.province_id + item.city_id + item.region_id + ''

    }
    // this.$route.params.item

    // console.log(this.areaList);

  }

};
</script>

<template>
  <div class="edit">
    <van-nav-bar fixed :title="item.add ? '新增收货地址' : '编辑收货地址'" left-arrow @click-left="$router.go(-1)" />
    <div class="local">收货地址</div>
    <van-address-edit :area-list="areaList" :address-info="info" ref="wbd" @change-area="changeArea"
      :area-columns-placeholder="['省份', '城市', '区县']" @save="onSave" />

  </div>
</template>

<style lang="scss" scoped>
.edit {
  padding-top: 46px;
  background-color: #fafafa;
  height: 100%;

  ::v-deep {
    .van-nav-bar__arrow {
      color: #333;
    }
  }

  .local {
    padding-left: 10px;
    font-size: 14px;
    margin-top: 25px;
    color: #949599;
  }


}
</style>